<template>
	<uni-drawer class="layer-ctrl" ref="drawer" mode="right" style="z-index: 9999;">
		<view class="block-title">
			底图
		</view>
		<view class="block-content flex-row">
			<view>
				<view :class="['map-type',{'map-type-checked':mapTypeCurr === 0}]" @click="mapTypeCurr = 0" style="background-position: 0 0">
					<view :class="['map-type-mark',{'map-type-mark-check':mapTypeCurr === 0}]">
						标准
					</view>
				</view>
				<view style="text-align: center;padding: 10rpx 0;">
					标准地图
				</view>
			</view>
			<view>
				<view :class="['map-type',{'map-type-checked':mapTypeCurr === 1}]" @click="mapTypeCurr = 1" style="background-position: 0 -300rpx">
					<view :class="['map-type-mark',{'map-type-mark-check':mapTypeCurr === 1}]">
						卫片
					</view>
				</view>
				<view style="text-align: center;padding: 10rpx 0;">
					卫星图片
				</view>
			</view>
		</view>
		<view class="block-title">
			事件
		</view>
		<view class="block-content flex-row" style="flex-wrap: wrap;justify-content: left;">
			<view style="text-align: center; width: 33%;">
				<uni-icons type="info-filled" @click="covidEvtChecked = !covidEvtChecked" style="padding-right: 15rpx;" :color="covidEvtChecked?'#4ca3ff':'#d8d8d8'" size="60" />
				<view>疫情事件</view>
			</view>
		</view>
		<view class="block-title">
			图层
		</view>
		<view class="block-content">
			<checkbox-group @change="checkboxChange" class="check-box-group">
				<view v-for="l in lyrList">
					<checkbox class="check-box" :value="l.id" :checked="l.checked" />{{l.label}}
				</view>
			</checkbox-group>
		</view>
	</uni-drawer>
</template>
<script>
	export default {
		name: "LayerControlLeaf",
		props: ['map'],
		data() {
			return {
				lyrList: [{
					id: '1',
					label: '居住区',
					layerId: 'cite:geo_residential_gcj02',
					checked: true
				},
				{
					id: '2',
					label: '学校区域',
					layerId: 'cite:geo_school_gcj02',
					checked: true
				}],
				mapTypeCurr: 0,
				covidEvtChecked:false
			}
		},
		watch: {
			mapTypeCurr(val) {
				if (val === 0) {
					this.map.removeLayer('baseSatelayer')
					this.map.addLayerToMap('baseNormalLayer')
					this.map._layerDict['baseNormalLayer'].setZIndex(0)

				} else {
					this.map.removeLayer('baseNormalLayer')
					this.map.addLayerToMap('baseSatelayer')
					this.map._layerDict['baseSatelayer'].setZIndex(0)
				}

			},
			covidEvtChecked(val){
				val?this.map.addLayerToMap('covidEvt'):this.map.removeLayer('covidEvt')
			}
		},
		computed: {},
		methods: {
			open() {
				this.$refs.drawer.open()
			},
			checkboxChange(e) {
				console.log(e.detail.value)
				this.lyrList.forEach(
					l => {
						l.checked = e.detail.value.includes(l.id)
						e.detail.value.includes(l.id)?this.map.addLayerToMap(l.layerId):this.map.removeLayer(l.layerId)
					}
				)
			}


		},
		created() {

		},
		mounted() {


		}
	}
</script>

<style lang="scss">

</style>
